/*
 * @Author: your name
 * @Date: 2021-05-21 17:25:21
 * @LastEditTime: 2021-05-22 14:03:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \three_demo\src\pages\3dScreen\components\right\devStatics.js
 */
import React,{useEffect} from 'react'
import axios from 'requset/request';

export default function DevLine() {
    let  myChart ='';
    // var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/aqi-beijing.json';

    useEffect(()=>{
        myChart = window.echarts.init(document.getElementById('lineMain'));
        // initHistoryProp();
        axios({
            method: 'get',
            url: './json/devLine.json',
        }).then(res=>{
            initHistoryProp(res.data);
        }).catch((err)=>{
            // message.error('操作失败');
        });
    })

    const initHistoryProp=(data)=>{
        let option = {
            tooltip: {
                 trigger: 'axis'
            },
            grid: {
                left: '5%',
                right: '15%',
                bottom: '10%'
            },
            xAxis: {
                show:false,
                data: data.map(function (item,index) {
                    return item[0];
                })
            },
            yAxis: {
                show:false
            },
            series: {
                name: '电压',
                type: 'line',
                data: data.map(function (item) {
                    return item[1];
                }),
                lineStyle:{
                    color:"#07fbf6"
                },
                itemStyle: {
                    borderWidth: 1,
                    borderColor: '#030409',
                    color: '#00baff',
                }
            }
        }
        myChart.setOption(option);
        myChart.resize();
    }

    return (
        <div>
             <div id="lineMain" style={{ width: '100%', height: 250 }}></div>
        </div>
    )
}
